<template>
  <div class="homeSet">
    <span class="tip">提示：点击图片框切换首页轮播图</span>
    <div class="swiper">
      <div class="swiper-content" v-for="item in swiper" :key="item.id">
        <span>轮播图{{ item.id }}:</span>
        <el-upload
          class="avatar-uploader"
          :action="`${action}/company/uploadSwiper`"
          :show-file-list="false"
          :data="{ set_name: item.set_name }"
          :on-success="handleSwiperSuccess"
        >
          <img v-if="item.set_value" :src="item.set_value" class="avatar" />
          <img v-else src="@/assets/images/noImage.png" />
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getAllSwiperAPI } from '@/api/company'
import { tracking } from '@/utils/operation'
import { ElMessage, type UploadProps } from 'element-plus'
import { onMounted, ref } from 'vue'
/** 记录操作 */
const userInfo = JSON.parse(localStorage.getItem('UserInfo')!).UserInfo

// 轮播图数据
const swiper = ref<CompanyList[]>([])

// 获取项目地址
const action = import.meta.env.VITE_APP_BASE_API
// 上传轮播图成功
const handleSwiperSuccess: UploadProps['onSuccess'] = (response) => {
  if (response.status === 1) {
    getAllSwiper()
    tracking('', userInfo?.name, '公司', '中级', `修改首页轮播图`)
    ElMessage({ type: 'success', message: '更新成功' })
  }
}
// 获取全部轮播图
const getAllSwiper = async () => {
  const res = await getAllSwiperAPI()
  swiper.value = res.data!
}

onMounted(() => {
  getAllSwiper()
})
</script>

<style scoped lang="scss">
.tip {
  color: #aaa;
}
.swiper-content {
  display: flex;
  margin: 20px;
  span {
    margin-right: 10px;
  }
}
.avatar-uploader {
  .avatar {
    width: 400px;
    height: 150px;
    display: block;
    border-radius: 8px;
  }
}
</style>
